<script setup lang="ts">
import { ref } from 'vue'
import { jumpToBlank } from '@/utils'
import SelectEngin from '@/components/header-content/components/input-bar/select-engin.vue'
import { debounce } from 'lodash'
import { getSearchOptionsBySite } from '@/components/header-content/utils/search-options'
import { SearchEngin } from '@/config/header-search-engin'

interface Props {
  modelValue: string
}
const props = defineProps<Props>()

const $emit = defineEmits(['update:modelValue'])

const isFocus = ref<boolean>(false)
const handleInputFocus = () => {
  isFocus.value = true
  handleSearch(inputValue.value)
}
const handleInputBlur = () => {
  isFocus.value = false
}

const inputValue = ref<string>(props.modelValue)
const handleChange = (value: string) => {
  inputValue.value = value

  $emit('update:modelValue', inputValue.value)
}

const searchOptions = ref<{ value: string; text: string }[]>([])
const handleSearch = debounce((value: string) => {
  if (!value.length) {
    searchOptions.value.length = 0
    return false
  }

  const selectedEngin = selectEnginRef.value?.getCurrentEngin() as SearchEngin

  const handleRequestUrl = selectedEngin?.handleRequestUrl as any
  const url = handleRequestUrl(value)

  getSearchOptionsBySite({ url, target: selectedEngin }).then((result: any) => {
    searchOptions.value = result
  })
}, 200)

const selectEnginRef = ref<InstanceType<typeof SelectEngin>>()
const handleTab = (event: Event) => {
  event.preventDefault()
  searchOptions.value.length = 0
  selectEnginRef.value?.switchEngin()
}

const handleEnter = () => {
  const handleBlankSearchUrl = selectEnginRef.value?.getCurrentEngin()
    .handleBlankSearchUrl as any

  const url = handleBlankSearchUrl(inputValue.value)

  jumpToBlank(url)
}
</script>

<template>
  <div class="input-class flex" :class="{ 'input-focus': isFocus }">
    <div class="input-prefix-class">
      <SelectEngin ref="selectEnginRef" />
    </div>
    <a-auto-complete
      class="flex-1 text-sm"
      v-model="inputValue"
      :options="searchOptions"
      placeholder="输入关键词搜索 | 按下Tab切换搜索引擎"
      allowClear
      backfill
      @blur="handleInputBlur"
      @focus="handleInputFocus"
      @change="handleChange"
      @select="handleEnter"
      @search="handleSearch"
      @keydown.tab="handleTab($event)"
      @keyup.enter="handleEnter"
    />
  </div>
</template>

<style lang="scss" scoped>
.input-class {
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  &:hover {
    border-color: #40a9ff;
  }
  .ant-select {
    display: block;
  }
  :deep(.ant-select-selector) {
    border: none !important;
    box-shadow: none !important;
    border-radius: 10px;
  }
  :deep(.anticon) {
    vertical-align: top !important;
  }
  :deep(.close-circle) {
    vertical-align: top !important;
  }
}
.input-focus {
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgb(24 144 244 / 20%);
  border-right-width: 1px !important;
  outline: 0;
}

.input-prefix-class {
  :deep(.ant-select:not(.ant-select-customize-input) .ant-select-selector) {
    border: none;
    box-shadow: none;
  }
}
</style>
